import {Layout, Menu, Breadcrumb, Icon} from 'antd';
import {ReactDOM} from "react";
import * as React from "react";

const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;


import IndexRouter from '../../router/IndexRouter'

import {Link, Redirect, Route, Router, Switch} from 'react-router-dom'
import * as History from 'history'

let history = History.createHashHistory()

class Index extends React.Component {

    handleNavClick(path: string) {
        if (path != history.location.pathname) {
            history.push(path)
        }
    }

    render(): React.ReactNode {
        return (<Layout tagName={"section"}>
            <Header className="header" tagName={"header"}>
                <div className="logo"/>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['2']}
                    selectedKeys={['IndexRoute-1']}
                    style={{lineHeight: '64px'}}
                >
                    <Menu.Item key="1">nav 1</Menu.Item>
                    <Menu.Item key="2">nav 2</Menu.Item>
                    <Menu.Item key="3">nav 3</Menu.Item>
                </Menu>
            </Header>
            <Layout tagName={"main"} style={{minHeight: 'calc(100vh - 65px)'}}>
                <Sider width={200} style={{background: '#fff'}}>
                    {/*<Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{height: '100%'}}
                    >
                        <SubMenu key="sub1" title={<span><Icon type="user"/>计划任务管理</span>}>
                            <Menu.Item key="1">计划任务</Menu.Item>
                            <Menu.Item key="2">新建计划任务</Menu.Item>
                            <Menu.Item key="3">option3</Menu.Item>
                            <Menu.Item key="4">option4</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" title={<span><Icon type="laptop"/>邮件管理</span>}>
                            <Menu.Item key="5">option5</Menu.Item>
                            <Menu.Item key="6">option6</Menu.Item>
                            <Menu.Item key="7">option7</Menu.Item>
                            <Menu.Item key="8">option8</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" title={<span><Icon type="notification"/>索引管理</span>}>
                            <Menu.Item key="9">option9</Menu.Item>
                            <Menu.Item key="10">option10</Menu.Item>
                            <Menu.Item key="11">option11</Menu.Item>
                            <Menu.Item key="12">option12</Menu.Item>
                        </SubMenu>
                    </Menu>*/}
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{height: '100%'}}>
                        {
                            IndexRouter.map((it, index) => {
                                return (
                                    <SubMenu key={'sub' + index + 1}
                                             title={
                                                 <span><Icon
                                                     type={it.icon ? it.icon : 'laptop'}/>{it.title}</span>}>
                                        {

                                            it.sub && it.sub.map((sit, sindex) => {
                                                return (
                                                    <Menu.Item onClick={() => {
                                                        this.handleNavClick(sit.path)
                                                    }} key={it + "-" + sindex}>{sit.title}</Menu.Item>
                                                )
                                            })

                                        }
                                    </SubMenu>)
                            })
                        }
                    </Menu>

                </Sider>
                <Layout tagName={"footer"} style={{padding: '0 24px 24px'}}>
                    <Breadcrumb style={{margin: '12px 0'}}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content tagName={"main"} style={{background: '#fff', padding: 24, margin: 0, minHeight: 280}}>
                        <Router history={history}>


                            <div>
                                <Switch>
                                    {
                                        IndexRouter.map((it, i) => {
                                            return (
                                                it.sub && it.sub.map((sit, si) => {
                                                    return (
                                                        <Route exact key={'IndexRoute-' + si} path={sit.path}
                                                               component={sit.component}/>
                                                    )
                                                })
                                            )
                                        })

                                    }
                                </Switch>

                            </div>


                        </Router>
                    </Content>
                </Layout>
            </Layout>
        </Layout>);
    }

}

export default Index